@charset "utf-8";

* { margin: 0; padding: 0; }
a { color: #fff; text-decoration: none; }
body { color: #fff; font-family: "NexonLv1Gothic"; font-weight: 300; background-color: #111; }

/*nav*/
#parallax__nav { position: fixed; left: 0; top: 20px; width:100%; z-index: 1000; text-align: center; }
#parallax__nav li { list-style: none; }
#parallax__nav li a { display: inline-block; text-align: center; line-height: 30px; transition: all 0.3s; }
#parallax__nav .logo {display:block; position:relative; top:30px;}
#parallax__nav .logo a {display:block; width:286px; height:43px; background:url('/img/inc/logo_w.png') no-repeat;}
#parallax__nav .nav {display:block; position:absolute; right:0; width:53%; margin-top:-24px;}
#parallax__nav nav {display: block; position: relative; left:-50px; top:0; width:auto; margin:0 auto; transition: all 0.65s;}
#parallax__nav nav>ul {display:flex; width:100%;}
#parallax__nav nav>ul>li {width:calc(100% / 5);}
#parallax__nav nav a, #parallax__nav nav a span {font-family:'gmarket-sans-ttf-light'; transition:.25s; color:#fff; font-size:15px;}
#parallax__nav nav a:hover span {font-family:'gmarket-sans-ttf-bold'; color:#fff;}
#parallax__nav .dropbtn .dropdown .stroke .dropdown-content li a span {color:#fff;}
#parallax__nav .toggle-button {top:24px; right:0;}
#parallax__nav .toggle-button span {background:#fff;}
#parallax__nav .overlay nav>ul>li>a,
#parallax__nav .overlay.visible nav>ul>li>ul li a span{color:#fff;}
#parallax__nav .overlay.visible{top:-23px;}
#parallax__nav .overlay .allmenu{left:0; width:100vw; overflow-y:auto;}
#parallax__nav .overlay .allmenu>ul{width:100%; margin:0 auto;}
#parallax__nav nav .topmenu {width:100%;}

/* parallax__cont */
#parallax__cont { overflow: hidden; }
.parallax__item { width: 100%; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; }
#section2,
#section4,
#section6,
#section8 { background-color: #222; }
#parallax__cont {width: 100%; margin: 0 auto; /* background-color: rgba(255,255,255,0.1); */ }
.parallax__item { width: 100%; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.parallax__item:nth-child(even) { margin-left: 0; text-align: right; }
.parallax__item__num {position: absolute; right: 20px; bottom: 20px; font-size: 3vw; line-height: 1; z-index: 10; }
.parallax__item:nth-child(even) .parallax__item__num { left: auto; right: -5vw; }
.parallax__item__title { padding-bottom: 5px; font-weight: 400; }
.parallax__item__imgWrap { width: 100%; overflow: hidden; background-position:center;}
.parallax__item__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; background-size: cover; background-position: center; }
.parallax__item__imgNon { background-image:none !important;}
.parallax__item__imgNon.nonBg1 { background-color:#fff; }
.parallax__item__imgNon.nonBg2 { background-color:#e5eaf5; }
.parallax__item__img::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 1; }
.parallax__item:hover .parallax__item__img { filter: saturate(100%); transform: scale(1.145); transition-delay: .33s; }
#section1 .parallax__item__img {} /*VIDEO*/
#section2 .parallax__item__img { background-image: url(/img/main/visual02.jpg); } /*BUSINESS*/
#section3 .parallax__item__img { background-image: url(/img/main/visual01.jpg); } /*NEWS*/
#section4 .parallax__item__img { background-image: url(/img/main/visual04.jpg); } /*CS CENTER*/
#section5 .parallax__item__img { background-image: url(/img/main/visual05.jpg); }
#section6 .parallax__item__img { background-image: url(/img/main/visual01.jpg); }
#section7 .parallax__item__img { background-image: url(/img/main/visual02.jpg); }
#section8 .parallax__item__img { background-image: url(/img/main/visual03.jpg); }
.parallax__item__desc {z-index: 100; position: relative; width:100%; transition-property:transform;}
.parallax__item:nth-child(even) .parallax__item__desc { }
/* option */
.split > span { display: inline-block; }
/*main Title Text*/
.parallax__item__desc .in {display:flex; flex-direction:column; align-items:center; align-content:center; justify-content:center; position:relative; z-index:2; width:80vw; height:100%; margin:0 auto; padding:0 20px;}
.parallax__item__desc .txt_wrap {margin-bottom:25px; text-align:center;}
.parallax__item__desc .title { font-size: 4em;/* text-transform: uppercase;*/ line-height:300%; text-align:center;}
.parallax__item__desc .title span { width: 100%; float: left; color: #fff; line-height:1.35em; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); transform: translateY(-50px); opacity: 0; animation-name: titleAnimation; animation-duration: 1.5s; }
.parallax__item__desc .title span { animation-delay: 1s; -webkit-animation-fill-mode: forwards; }
.parallax__item__desc .title span:first-child { font-size: 1.5em; animation-delay: 0.3s; }
.parallax__item__desc .title span.pointCol {color: #b6ff00; }
.parallax__item__desc .title span.last_subtxt {font-size:25px; font-weight:300; line-height:200%; animation-delay: 2s; }
.parallax__item__desc .view_btn {display:inline-block; float:none; position:relative; border:3px solid transparent; margin-top:30px; padding:15px 45px; animation:btnAnimation; animation-duration:4s; border-radius:35px 0 35px 0; background: linear-gradient(#12193e 0 0) padding-box, linear-gradient(to right, #cdeb00, #f77856, #ff7b89) border-box;}
.parallax__item__desc .view_btn span {color:#fff;}

#parallax__cont .scroll-down-animation { position: fixed; bottom: 0; left: 50%; transform: translate(-50%,-50%); z-index:990;}
#parallax__cont .scrolltext { color: #fff; font-family: 'Roboto', 'Arial', sans-serif; font-weight: 200; font-size: 15px; margin-top:7px;}
#parallax__cont .mouse { margin: 0 auto; display: block; border-radius: 30px; border: 2px solid #fff; height: 50px; width: 30px; position: relative; }
#parallax__cont .scrollmove { position: absolute; background-color: #fff; height: 8px; width: 8px; border-radius: 50%; left: 50%; transform: translateX(-50%); animation: scrollmove 1.75s linear infinite; }

@keyframes scrollmove {
    0% { transform: translate(-50%,0px); opacity: 0; }
    50% { transform: translate(-50%,15px); opacity: 1; }
    100% { transform: translate(-50%,35px); opacity: 0; }
}

@keyframes titleAnimation {
    0% { transform: translateY(-70px); opacity: 0; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); }
    100% { transform: translateY(0); opacity: 1; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%); }
}

@keyframes btnAnimation {
    0% { transform: translateY(-170px); opacity: 0; -webkit-clip-path: polygon(0 100%, 0 0, 0 100%, 100% 80%); animation-delay: 3.5s; }
    100% { transform: translateY(0); opacity: 1; -webkit-clip-path: polygon(100 100%, 100% 0, 0 100%, 100% 30%); }

    }

/*main_contents*/
.contMotion {text-align:center;}
.contMotion p {text-align:center;}


@media screen and (max-width:1600px) {
    #parallax__nav .overlay.visible {left:auto; right:0;}
    .parallax__item__desc .title {font-size:3em;}
}

@media screen and (max-width:1100px) {
    #parallax__nav .nav {width:100%;}
    #parallax__nav nav {left:0;}
}
@media screen and (max-width:900px) {
    #parallax__nav .logo a {background-size:85%;}
    #parallax__nav nav>ul {display:block; margin:0 auto;}
    #parallax__nav .toggle-button {top:10px;}
    #parallax__nav .overlay.visible {left:auto; right:0;}
    #parallax__nav .overlay nav>ul>li>a {margin-bottom:0;}
    #parallax__nav .overlay nav>ul>li {display:inline-block; width:45%;}
	#parallax__nav .overlay nav>ul>li>ul>li {text-align:center; line-height:100%; font-size:14px;}
	#parallax__nav .overlay nav>ul>li>ul>li a {line-height:120%;}
    .parallax__item__desc .title {font-size:2em;}
    .parallax__item__desc .title span:first-child {font-size:1.1em;}
    .parallax__item__desc .title span.last_subtxt {font-size:0.52em; line-height:150%; padding-top:30px;}
    .parallax__item__desc .view_btn {padding:15px 32px;}
    .parallax__item__desc .view_btn span {font-size:14px;}
    #footer {padding:0;}
    #footer p {font-size:14px;}
	#footer .logo {display:none;}
    #footer .btm_Rtel p a span {font-size:.85rem !important;}
	#footer .btm_Rtel p span {font-size:1.85em;}
}